<template>
  <div>
    <div>
      <v-viewer ref="view"></v-viewer>
      <el-form size="medium">
        <el-form :inline="true">
          <el-form-item label="品牌名">
            <el-input v-model="brandName"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getBrandList">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
            <el-button type="primary"
                       @click="newBrand">新增</el-button>
          </el-form-item>
        </el-form>
      </el-form>
      <el-table ref="multipleTable"
                border
                stripe
                :data="brandList"
                tooltip-effect="dark"
                style="width: 100%">
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{scope.row.createDateTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌名称">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌图片">
          <template slot-scope="scope">
            <pic-view :file-list="scope.row.brandPicUrlList"
                      :disabled="true"
                      upload-class="short-upload close-delete"
                      :pic-name-list.sync="scope.row.brandPicNameList"
                      :max-size="scope.row.brandPicUrlList?scope.row.brandPicUrlList.length:0"
                      @showImg="showImg"></pic-view>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="modify(scope.row.id)"
                       type="text"
                       size="small">修改</el-button>
            <el-button @click="detail(scope.row.id)"
                       type="text"
                       size="small">订单详情</el-button>
            <el-button @click="del(scope.row.id)"
                       type="text"
                       size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
      </div>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               @change="pageChange"></view-page>
  </div>
</template>

<script>
import '@/style/common.scss'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import viewPage from '@/components/pagination'
import { api } from '@/api'
import { packageImgList } from '@/utils/imgPackage'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  data() {
    return {
      brandName: null,
      currentPage: 0,
      total: null,
      brandList: []
    }
  },
  activated() {
    this.getBrandList()
  },
  components: { picView, vViewer, viewPage },
  methods: {
    newBrand() {
      this.$router.push({
        name: 'newBrand'
      })
    },
    reset() {
      this.brandName = null
      this.getBrandList()
    },
    getBrandList() {
      const params = {
        brandName: this.brandName,
        pageNum: this.currentPage,
        pageSize: 10
      }
      this.$http.post(api.BRAND_LIST, params).then(
        res => {
          if (res.result.hasContent) {
            this.brandList = res.result.content
            this.brandList.forEach(brand => {
              const brandImgList = packageImgList(brand.picture)
              brand.brandPicNameList = brandImgList[0]
              brand.brandPicUrlList = brandImgList[1]
            })
            this.currentPage = res.result.pageNumber
            this.total = res.result.totalElements
          } else {
            this.brandList = []
            this.currentPage = 0
            this.total = null
          }
        }
      )
    },
    del(id) {
      this.$http.get(api.BRAND_DEL, { id: id }).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('删除成功！', 'success')
            this.getBrandList()
          }
        }
      )
    },
    modify(id) {
      this.$router.push({
        name: 'modifyBrand',
        params: { brandId: id }
      })
    },
    detail(id) {
      this.$router.push({
        name: 'brandDetail',
        params: { brandId: id }
      })
    },
    pageChange(page) {
      this.currentPage = page - 1
      this.getBrandList()
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    }
  }
}
</script>
